import React,{Component} from './lib/react'
import ReactDOM from './lib/react-dom'

function Menu(props) {
  return (
  <div>
    <h1>React 组件Menu</h1>
    <h2>{props.title}</h2>
  </div>
  )
  }
class App extends Component{
  constructor(props) {
    super(props)

    this.state = {
      title:'title属性'
    }
    this.handClick=this.handClick.bind(this)
  }

  handClick() {
    this.setState({
      title:'已经改变这个题目'
    })
  }

  render() {
    return (
      <div>
        <Menu title={this.state.title} />
        <h1>下面为App组件部分</h1>
        <h2>{this.state.title}</h2>
        <p>这是绑定的标签id:{this.props.id }</p>
        <span onClick={this.handClick}>点击我改变题目</span>
       </div>
     )
  }
}

ReactDOM.render((
  <App id="app">React 手写版</App>
),document.body)
// function clickMe(){
// console.log('clickMe')
// }
// let styleObj = {
//   color: 'red',
//   fontSize: '20px'
// }

// // jsx
// let div = (
//   <div className="hello" id='header' onClick={clickMe} style={styleObj } dataId='hello'>
//   <span>hello world1</span>
//   <span>hello world2</span>
//          </div>);
// console.log(div);
// // 将虚拟dom渲染到页面上
// ReactDOM.render(div,document.body)
